// import React, {useEffect, useRef} from 'react';

// const VideoPlayer = () => {
//     const videoRef = useRef(null);

//     useEffect(() => {
//         const video = videoRef.current as any;

//         const playVideo = () => {
//             video.play();
//         };

//         // 在组件加载完成后，调用播放函数
//         playVideo();

//         // 清除资源
//         return () => {
//             video.pause();
//         };
//     }, []);

//     return (
//         <video ref={videoRef} autoPlay muted controls src="../video/a.mov">
//             {/* <source  type="video/quicktime" /> */}
//         </video>
//     );
// };

// export default VideoPlayer;

import React, {useContext} from 'react';

// 创建一个上下文
const MyContext = React.createContext({value: '', setValue: (v: any) => v});

const ParentComponent = ({children = {} as any}) => {
    const [value, setValue] = React.useState('Hello from context!');

    return <MyContext.Provider value={{value, setValue}}>{children}</MyContext.Provider>;
};

export type API = {
    // 创建组件
    createComponent(props: ComponentProps): void;

    // 创建数据源
    createDatasource(data: DatasourceType): void;
};

type ComponentProps = {
    x: number | string;
    y: number | string;
    width: number | string;
    height: number | string;
};

type DatasourceType = {
    // 数据源名称
    name: string;

    // 数据源endpoint
    endpoint: string;
};

function ChildComponent() {
    // 在子组件中使用 useContext 获取上下文的值
    const {value, setValue} = useContext(MyContext);

    return (
        <div>
            {value}
            <button onClick={() => setValue('111')}>惦记</button>
        </div>
    );
}

function App() {
    useContext(MyContext);

    return (
        <div>
            <ParentComponent>
                <ChildComponent />
            </ParentComponent>
        </div>
    );
}

export default App;
